<div class="content-section introduction">
    <div class="feature-intro">
        <h1>BarChart</h1>
        <p>A bar chart or bar graph is a chart that presents Grouped data with rectangular bars with lengths proportional to the values that they represent.</p>
    </div>
    <app-demoActions github="chart/barchart"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>Vertical</h5>
        <p-chart type="bar" [data]="basicData" [options]="basicOptions"></p-chart>
    </div>

    <div class="card">
        <h5>Horizontal</h5>
        <p-chart type="bar" [data]="basicData" [options]="horizontalOptions"></p-chart>
    </div>

    <div class="card">
        <h5>Multi Axis</h5>
        <p-chart type="bar" [data]="multiAxisData" [options]="multiAxisOptions"></p-chart>
    </div>

    <div class="card">
        <h5>Stacked</h5>
        <p-chart type="bar" [data]="stackedData" [options]="stackedOptions"></p-chart>
    </div>
</div>

<div class="content-section documentation">

    <p-tabView>
        <p-tabPanel header="Source">
        <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/chart/barchart" class="btn-viewsource" target="_blank">
            <span>View on GitHub</span>
        </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="card"&gt;
    &lt;h5&gt;Vertical&lt;/h5&gt;
    &lt;p-chart type="bar" [data]="basicData" [options]="basicOptions"&gt;&lt;/p-chart&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Horizontal&lt;/h5&gt;
    &lt;p-chart type="bar" [data]="basicData" [options]="horizontalOptions"&gt;&lt;/p-chart&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Multi Axis&lt;/h5&gt;
    &lt;p-chart type="bar" [data]="multiAxisData" [options]="multiAxisOptions"&gt;&lt;/p-chart&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Stacked&lt;/h5&gt;
    &lt;p-chart type="bar" [data]="stackedData" [options]="stackedOptions"&gt;&lt;/p-chart&gt;
&lt;/div&gt;
</app-code>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class BarChartDemo &#123;

    basicData: any;

    basicOptions: any;

    multiAxisData: any;

    chartOptions: any;

    multiAxisOptions: any;

    stackedData: any;

    stackedOptions: any;

    horizontalOptions: any;

    subscription: Subscription;

    config: AppConfig;

    constructor(private configService: AppConfigService) &#123;&#125;

    ngOnInit() &#123;
        this.basicData = &#123;
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
                &#123;
                    label: 'My First dataset',
                    backgroundColor: '#42A5F5',
                    data: [65, 59, 80, 81, 56, 55, 40]
                &#125;,
                &#123;
                    label: 'My Second dataset',
                    backgroundColor: '#FFA726',
                    data: [28, 48, 40, 19, 86, 27, 90]
                &#125;
            ]
        &#125;;

        this.multiAxisData = &#123;
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [&#123;
                label: 'Dataset 1',
                backgroundColor: [
                    '#EC407A',
                    '#AB47BC',
                    '#42A5F5',
                    '#7E57C2',
                    '#66BB6A',
                    '#FFCA28',
                    '#26A69A'
                ],
                yAxisID: 'y',
                data: [65, 59, 80, 81, 56, 55, 10]
            &#125;, &#123;
                label: 'Dataset 2',
                backgroundColor: '#78909C',
                yAxisID: 'y1',
                data: [28, 48, 40, 19, 86, 27, 90]
            &#125;]
        &#125;;

        this.multiAxisOptions = &#123;
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#495057'
                    &#125;
                &#125;,
                tooltips: &#123;
                    mode: 'index',
                    intersect: true
                &#125;
            &#125;,
            scales: &#123;
                x: &#123;
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;,
                y: &#123;
                    type: 'linear',
                    display: true,
                    position: 'left',
                    ticks: &#123;
                        min: 0,
                        max: 100,
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;,
                y1: &#123;
                    type: 'linear',
                    display: true,
                    position: 'right',
                    grid: &#123;
                        drawOnChartArea: false,
                        color: '#ebedef'
                    &#125;,
                    ticks: &#123;
                        min: 0,
                        max: 100,
                        color: '#495057'
                    &#125;
                &#125;
            &#125;
        &#125;;

        this.horizontalOptions = &#123;
            indexAxis: 'y',
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#495057'
                    &#125;
                &#125;
            &#125;,
            scales: &#123;
                x: &#123;
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;,
                y: &#123;
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;
            &#125;
        &#125;;

        this.stackedData = &#123;
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [&#123;
                type: 'bar',
                label: 'Dataset 1',
                backgroundColor: '#42A5F5',
                data: [
                    50,
                    25,
                    12,
                    48,
                    90,
                    76,
                    42
                ]
            &#125;, &#123;
                type: 'bar',
                label: 'Dataset 2',
                backgroundColor: '#66BB6A',
                data: [
                    21,
                    84,
                    24,
                    75,
                    37,
                    65,
                    34
                ]
            &#125;, &#123;
                type: 'bar',
                label: 'Dataset 3',
                backgroundColor: '#FFA726',
                data: [
                    41,
                    52,
                    24,
                    74,
                    23,
                    21,
                    32
                ]
            &#125;]
        &#125;;

        this.stackedOptions = &#123;
            tooltips: &#123;
                mode: 'index',
                intersect: false
            &#125;,
            responsive: true,
            scales: &#123;
                xAxes: [&#123;
                    stacked: true,
                &#125;],
                yAxes: [&#123;
                    stacked: true
                &#125;]
            &#125;
        &#125;;

        this.config = this.configService.config;
        this.updateChartOptions();
        this.subscription = this.configService.configUpdate$.subscribe(config =&gt; &#123;
            this.config = config;
            this.updateChartOptions();
        &#125;);
    &#125;

    updateChartOptions() &#123;
        if (this.config.dark)
            this.applyDarkTheme();
        else
            this.applyLightTheme();
    &#125;

    applyDarkTheme() &#123;
        this.basicOptions = &#123;
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;
            &#125;,
            scales: &#123;
                x: &#123;
                    ticks: &#123;
                        color: '#ebedef'
                    &#125;,
                    grid: &#123;
                        color: 'rgba(255,255,255,0.2)'
                    &#125;
                &#125;,
                y: &#123;
                    ticks: &#123;
                        color: '#ebedef'
                    &#125;,
                    grid: &#123;
                        color: 'rgba(255,255,255,0.2)'
                    &#125;
                &#125;
            &#125;
        &#125;;

        this.horizontalOptions = &#123;
            indexAxis: 'y',
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;
            &#125;,
            scales: &#123;
                x: &#123;
                    ticks: &#123;
                        color: '#ebedef'
                    &#125;,
                    grid: &#123;
                        color: 'rgba(255,255,255,0.2)'
                    &#125;
                &#125;,
                y: &#123;
                    ticks: &#123;
                        color: '#ebedef'
                    &#125;,
                    grid: &#123;
                        color: 'rgba(255,255,255,0.2)'
                    &#125;
                &#125;
            &#125;
        &#125;;

        this.multiAxisOptions = &#123;
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;,
                tooltips: &#123;
                    mode: 'index',
                    intersect: true
                &#125;
            &#125;,
            scales: &#123;
                x: &#123;
                    ticks: &#123;
                        color: '#ebedef'
                    &#125;,
                    grid: &#123;
                        color: 'rgba(255,255,255,0.2)'
                    &#125;
                &#125;,
                y: &#123;
                    type: 'linear',
                    display: true,
                    position: 'left',
                    ticks: &#123;
                        min: 0,
                        max: 100,
                        color: '#ebedef'
                    &#125;,
                    grid: &#123;
                        color: 'rgba(255,255,255,0.2)'
                    &#125;
                &#125;,
                y1: &#123;
                    type: 'linear',
                    display: true,
                    position: 'right',
                    grid: &#123;
                        drawOnChartArea: false,
                        color: 'rgba(255,255,255,0.2)'
                    &#125;,
                    ticks: &#123;
                        min: 0,
                        max: 100,
                        color: '#ebedef'
                    &#125;
                &#125;
            &#125;
        &#125;;

        this.stackedOptions = &#123;
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;,
                tooltips: &#123;
                    mode: 'index',
                    intersect: false
                &#125;
            &#125;,
            scales: &#123;
                x: &#123;
                    stacked: true,
                    ticks: &#123;
                        color: '#ebedef'
                    &#125;,
                    grid: &#123;
                        color: 'rgba(255,255,255,0.2)'
                    &#125;
                &#125;,
                y: &#123;
                    stacked: true,
                    ticks: &#123;
                        color: '#ebedef'
                    &#125;,
                    grid: &#123;
                        color: 'rgba(255,255,255,0.2)'
                    &#125;
                &#125;
            &#125;
        &#125;;
    &#125;

    applyLightTheme() &#123;
        this.basicOptions = &#123;
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#495057'
                    &#125;
                &#125;
            &#125;,
            scales: &#123;
                x: &#123;
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;,
                y: &#123;
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;
            &#125;
        &#125;;

        this.horizontalOptions = &#123;
            indexAxis: 'y',
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#495057'
                    &#125;
                &#125;
            &#125;,
            scales: &#123;
                x: &#123;
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;,
                y: &#123;
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;
            &#125;
        &#125;;

        this.multiAxisOptions = &#123;
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#495057'
                    &#125;
                &#125;,
                tooltips: &#123;
                    mode: 'index',
                    intersect: true
                &#125;
            &#125;,
            scales: &#123;
                x: &#123;
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;,
                y: &#123;
                    type: 'linear',
                    display: true,
                    position: 'left',
                    ticks: &#123;
                        min: 0,
                        max: 100,
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;,
                y1: &#123;
                    type: 'linear',
                    display: true,
                    position: 'right',
                    grid: &#123;
                        drawOnChartArea: false,
                        color: '#ebedef'
                    &#125;,
                    ticks: &#123;
                        min: 0,
                        max: 100,
                        color: '#495057'
                    &#125;
                &#125;
            &#125;
        &#125;;

        this.stackedOptions = &#123;
            plugins: &#123;
                tooltips: &#123;
                    mode: 'index',
                    intersect: false
                &#125;,
                legend: &#123;
                    labels: &#123;
                        color: '#495057'
                    &#125;
                &#125;
            &#125;,
            scales: &#123;
                x: &#123;
                    stacked: true,
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;,
                y: &#123;
                    stacked: true,
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;
            &#125;
        &#125;;
    &#125;
&#125;

</app-code>
        </p-tabPanel>
    </p-tabView>
</div>
